﻿<template>
  <div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
    
    <el-card shadow="hover" class="layout-padding-auto create-form" >
      <el-form ref="formRef" :model="stateData.vmModel" label-width="120px">
        
<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>用户信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_UserId_FormItem" prop="Entity.UserId"  >
            <template #label>
                <WtmLabelTooltip label="绑定用户" tooltip="关联的系统用户对象" />
            </template>
            <el-select v-model="stateData.vmModel.Entity.UserId" disabled clearable class="width100">
                       <el-option v-for="item in stateData.AllFrameworkUsers" :key="item.Value" :value="item.Value" :label="item.Text"></el-option></el-select>
        </el-form-item>
    </el-col>
  </el-row>

</div>

<div class="form-section">
  <div class="section-title">
    <i class="_wtmicon _wtmicon-wxbzhanghu"></i>
    <span>菜单信息</span>
  </div>

  <el-row :gutter="20">

    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_MenuId_FormItem" prop="Entity.MenuId"   :rules="[{ required: true, message:'菜单ID为必填项',trigger:'blur'}]">
            <template #label>
                <WtmLabelTooltip label="菜单ID" tooltip="收藏菜单的唯一标识符" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.MenuId" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_MenuName_FormItem" prop="Entity.MenuName"   :rules="[{ required: true, message:'菜单名称为必填项',trigger:'blur'}]">
            <template #label>
                <WtmLabelTooltip label="菜单名称" tooltip="收藏菜单的显示名称" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.MenuName" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_MenuIcon_FormItem" prop="Entity.MenuIcon"  >
            <template #label>
                <WtmLabelTooltip label="菜单图标" tooltip="收藏菜单显示的图标样式" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.MenuIcon" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_MenuUrl_FormItem" prop="Entity.MenuUrl"  >
            <template #label>
                <WtmLabelTooltip label="菜单URL" tooltip="收藏菜单的访问地址路径" />
            </template>
            <el-input v-model="stateData.vmModel.Entity.MenuUrl" disabled clearable class="width100"></el-input>
        </el-form-item>
    </el-col>
    <el-col :xs="24" :lg="12" class="mb20">
        <el-form-item ref="Entity_SortOrder_FormItem" prop="Entity.SortOrder"  >
            <template #label>
                <WtmLabelTooltip label="排序" tooltip="收藏菜单的显示排序序号，数值越小越靠前" />
            </template>
            <el-input-number v-model="stateData.vmModel.Entity.SortOrder" disabled clearable class="width100"></el-input-number>
        </el-form-item>
    </el-col>
  </el-row>

</div>

        <div style="text-align:right;">
          
          <WtmButton @click="onClose"  type="default" :button-text="$t('message._system.common.vm.cancel')" style="margin-top:15px;"/>
        </div>
      </el-form>
    </el-card>
    
  </div>
</template>

<script setup lang="ts" name="message._system.common.vm.edit;false">
  import { reactive, ref, getCurrentInstance, onMounted, computed, nextTick} from 'vue';
  import { ElMessage } from 'element-plus';
  import { SysUserFavoriteApi as api } from '/@/views/_admin/sysuserfavorite/api';
  import other from '/@/utils/other';
  import { useRouter } from "vue-router";
  import { ISysUserFavoriteVm } from '/@/views/_admin/sysuserfavorite/api/interface';
  import { IViewModel } from '/@/types/common';
  
  const ci = getCurrentInstance() as any;
  const loading = ref(false);
  // 定义变量内容
  const formRef = ref();
  const stateData = reactive<IViewModel<ISysUserFavoriteVm>>({
      vmModel: {
      Entity:{
  			ID: null,
			UserId: null,
			MenuId: null,
			MenuName: null,
			MenuIcon: null,
			MenuUrl: null,
			SortOrder: null,

        },
        
    },
       
    AllFrameworkUsers: [] as any[],
  });
  
  // 取消
  const onClose = () => {
      closeDialog();
  };
  
  
  
  // 页面加载时
  onMounted(() => {
    loading.value = true;
    if (ci.attrs["wtmdata"]) {
      stateData.vmModel.Entity.ID = ci.attrs["wtmdata"].ID;
    }
    else if (useRouter().currentRoute.value.query.id) {
      stateData.vmModel.Entity.ID = useRouter().currentRoute.value.query.id as any;
    }
    const promises : Promise<any>[] = [
      
    other.getSelectList('/api/SysUserFavorite/GetFrameworkUsers',[],false).then(x=>{stateData.AllFrameworkUsers = x}),

      api()
        .get(stateData.vmModel.Entity.ID ?? "")
        .then((data: any) => other.setValue(stateData.vmModel, data))
    ];
    Promise.allSettled(promises).finally(() => {
      loading.value = false;
    // 设置对话框头部按钮
    nextTick(() => {
      setupHeaderButtons();
    });
    });
  });
  
  // 定义子组件向父组件传值/事件
  const emit = defineEmits(['refresh', 'closeDialog', 'updateHeaderButtons']);
  // 关闭弹窗
  const closeDialog = () => {
      emit('closeDialog');
  };
// 设置对话框头部按钮
const setupHeaderButtons = () => {
	const headerButtons = [
	  
	];
	// 通知父对话框更新头部按钮
	emit('updateHeaderButtons', headerButtons);
};
</script>